<template>
  <div class="courier-management">
    <h2>配送员管理</h2>
    <div class="toolbar">
      <button @click="showCreateForm">新增配送员</button>
    </div>

    <!-- 创建/编辑表单 -->
    <form v-if="showForm" @submit.prevent="submitForm">
      <div class="form-group">
        <label>姓名：</label>
        <input v-model="formData.name" required>
      </div>
      <div class="form-group">
        <label>手机号：</label>
        <input v-model="formData.phone" pattern="1[3-9]\d{9}" required>
      </div>
      <div class="form-group">
        <label>活动区域：</label>
        <div class="area-tags">
          <span v-for="(area, index) in formData.activityRange" :key="index" class="tag">
            {{ area }}
            <button type="button" @click="removeArea(index)">×</button>
          </span>
          <input 
            v-model="newArea" 
            @keydown.enter.prevent="addArea"
            placeholder="输入区域后按回车添加">
        </div>
      </div>
      <div class="form-actions">
        <button type="submit">保存</button>
        <button type="button" @click="cancelForm">取消</button>
      </div>
    </form>

    <!-- 配送员列表 -->
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>手机号</th>
          <th>活动区域</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="courier in couriers" :key="courier.id">
          <td>{{ courier.name }}</td>
          <td>{{ courier.phone }}</td>
          <td>{{ (courier.activityRange || []).join(', ') }}</td>
          <td>
            <button @click="editCourier(courier)">编辑</button>
            <button @click="deleteCourier(courier.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const showForm = ref(false);
const formData = ref({
  id: null,
  name: '',
  phone: '',
  activityRange: []
});
const newArea = ref('');
const couriers = ref([]);

// 获取配送员列表
const fetchCouriers = async () => {
  try {
    const response = await axios.get('/api/couriers');
    couriers.value = response.data;
  } catch (error) {
    console.error('获取配送员列表失败:', error);
  }
};

// 初始化加载数据
fetchCouriers();

const showCreateForm = () => {
  formData.value = { id: null, name: '', phone: '', activityRange: [] };
  showForm.value = true;
};

const addArea = () => {
  if (newArea.value.trim()) {
    formData.value.activityRange.push(newArea.value.trim());
    newArea.value = '';
  }
};

const removeArea = (index) => {
  formData.value.activityRange.splice(index, 1);
};

const submitForm = async () => {
  try {
    if (formData.value.id) {
      await axios.put(`/api/couriers/${formData.value.id}`, formData.value);
    } else {
      await axios.post('/api/couriers', formData.value);
    }
    await fetchCouriers();
    cancelForm();
  } catch (error) {
    console.error('保存失败:', error);
  }
};

const cancelForm = () => {
  showForm.value = false;
  formData.value = { id: null, name: '', phone: '', activityRange: [] };
};

const editCourier = (courier) => {
  formData.value = { ...courier };
  showForm.value = true;
};

const deleteCourier = async (id) => {
  if (confirm('确定要删除该配送员吗？')) {
    try {
      await axios.delete(`/api/couriers/${id}`);
      await fetchCouriers();
    } catch (error) {
      console.error('删除失败:', error);
    }
  }
};
</script>

<style scoped>
.courier-management {
  max-width: 1200px;
  margin: 20px auto;
  padding: 30px;
  background: white;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  border-radius: 8px;
}

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  width: 500px;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
  font-size: 20px;
}

.toolbar {
  margin-bottom: 25px;
  display: flex;
  justify-content: flex-end;
}

.toolbar button {
  padding: 10px 25px;
  background: #409EFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

table {
  width: 100%;
  border: 1px solid #EBEEF5;
  margin-top: 20px;
}

th {
  background: #f8f8f9;
  color: #515a6e;
  padding: 15px;
  text-align: left;
}

td {
  padding: 15px;
  border-top: 1px solid #EBEEF5;
  color: #606266;
}

.el-button {
  padding: 8px 15px;
  margin: 0 5px;
}

.operation-cell {
  white-space: nowrap;
}
</style>